<ion-header [translucent]="true">
	<ion-toolbar>
		<ion-buttons slot="start">
			<ion-menu-button></ion-menu-button>
		</ion-buttons>
		<ion-title>随机事件</ion-title>
		<ion-buttons slot="end">
			<ion-button color="primary" (click)="openMenu($event)" title="更多纯文本工具">
				<ion-icon slot="icon-only" name="ellipsis-horizontal"></ion-icon>
			</ion-button>
		</ion-buttons>
	</ion-toolbar>
	<ion-segment value="coin">
		<ion-segment-button *ngFor="let g of games;let i = index;" (click)="select(i)" [value]="g.code">
			<ion-icon [color]="g.code===game.code?'primary':''" [name]="g.icon"></ion-icon>
			<ion-label>{{ g.label }}</ion-label>
		</ion-segment-button>
	</ion-segment>
</ion-header>

<ion-content [fullscreen]="true">
	<ion-slides [options]="slideOpts">
		<ion-slide *ngFor="let g of games;let gi=index;">
			<ion-grid>
				<ion-row>
					<ion-col *ngFor="let r of result[gi];let i=index;" size="auto">
						<ion-item>
							<ion-badge slot="start" color="primary">{{ (setting.num>1?r.num:i+1) | format:'%02d' }}</ion-badge>
							<ion-icon [color]="r.color" [name]="r.icon"></ion-icon>
							<ion-label>{{ r.label }}</ion-label>
							<ion-note *ngIf="setting.time" slot="end">{{ r.time }}</ion-note>
						</ion-item>
					</ion-col>
				</ion-row>
			</ion-grid>
		</ion-slide>
	</ion-slides>
</ion-content>

<ion-fab vertical="center" horizontal="end" slot="fixed">
	<ion-fab-button (click)="play()">
		<ion-icon name="play"></ion-icon>
	</ion-fab-button>
</ion-fab>

<pre id="code">{{ text }}</pre>
